{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <h2 class="mb-4">我的消息</h2>
    
    <div class="list-group">
        {% for message in messages %}
        <div class="list-group-item {% if not message.is_read %}list-group-item-info{% endif %}">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ message.thesis.title }}</h5>
                <small>{{ message.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </div>
            <p class="mb-1">{{ message.content }}</p>
            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ url_for('main.thesis_detail', id=message.thesis_id) }}" 
                   class="btn btn-sm btn-primary">
                    查看论文
                </a>
                {% if not message.is_read %}
                <button class="btn btn-sm btn-outline-secondary mark-read" 
                        data-message-id="{{ message.id }}">
                    标记为已读
                </button>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="alert alert-info">
            暂无消息
        </div>
        {% endfor %}
    </div>

    {% if pagination and pagination.pages > 1 %}
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            {% for page in pagination.iter_pages() %}
                {% if page %}
                    <li class="page-item {% if page == pagination.page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('main.messages', page=page) }}">{{ page }}</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
    {% endif %}
</div>

{% block scripts %}
<script>
document.querySelectorAll('.mark-read').forEach(button => {
    button.addEventListener('click', function() {
        const messageId = this.dataset.messageId;
        fetch(`/message/${messageId}/read`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                this.closest('.list-group-item').classList.remove('list-group-item-info');
                this.remove();
            }
        });
    });
});
</script>
{% endblock %}
{% endblock %} 